<template>
	<view class="page-index">
		<view class="page-index-container">
			<!-- #ifdef APP-PLUS -->
			<view class="top_view"></view>
			<!-- #endif -->
			<view class="app-header fixed-top">
				<text class="iconfont iconerweima" @tap="handleScanCode"></text>
				<view class="module-filter" @tap="handleToSearch">
					<text class="iconfont iconsousuo"></text>
					搜索附近的商家商品
				</view>
				<navigator url="../user/message/index">
					<text class="iconfont iconxiaoxi"></text>
				</navigator>
			</view>
			<!-- 轮播图 -->
			<view class="module-slide">
				<swiper
					class="swiper"
					:indicator-dots="indicatorDots"
					:autoplay="autoplay"
					:interval="interval"
					:duration="duration"
				>
					<swiper-item>
						<navigator class="swiper-item" url="./details/index"></navigator>
					</swiper-item>

					<swiper-item>
						<navigator class="swiper-item" url="./details/index"></navigator>
					</swiper-item>
					<swiper-item>
						<navigator class="swiper-item" url="./details/index"></navigator>
					</swiper-item>
				</swiper>
			</view>
			<!-- 轮播图 -->
			<!-- 分类导航 -->
			<view class="module-classfic">
				<view
					class="item"
					v-for="item in classficList"
					:key="item.id"
					@tap="handleToList"
				>
					<text class="iconfont" :class="[item.icon]"></text>
					<text class="item-title">{{ item.title }}</text>
				</view>
			</view>
			<!-- 分类导航 -->
			<!-- 商品列表 -->
			<view class="module-product">
				<view class="module-header">
					<view class="header-title">全部商品</view>
					<view class="header-tips">
						吃货必备，超值特价
						<navigator url="./list/index" style="float: right;">
							更多
						</navigator>
					</view>
				</view>
				<view class="module-list">
					<navigator
						class="media"
						v-for="item in productList"
						:key="item.id"
						:url="'./store/index?id=' + item.id"
					>
						<image class="media-object"></image>
						<view class="media-content">
							<view class="media-title">{{ item.title }}</view>
							<view class="media-tips">
								{{ item.tips }}
								<view class="media-price">￥{{ item.price }}</view>
							</view>
						</view>
					</navigator>
				</view>
				<!-- 上拉加载组件 -->
				<uniLoadMore :status="loadStatus"></uniLoadMore>
				<!-- 上拉加载组件 -->
			</view>

			<!-- 商品列表 -->
		</view>
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore,
	},
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			loadStatus: 'more',
			classficList: [
				{
					id: 1,
					title: '水果',
					icon: 'icondingdan',
				},
				{
					id: 2,
					title: '蔬菜',
					icon: 'icondingdan',
				},
				{
					id: 3,
					title: '鱼肉蛋禽',
					icon: 'icondingdan',
				},
				{
					id: 4,
					title: '熟食面点',
					icon: 'icondingdan',
				},
				{
					id: 5,
					title: '牛奶面包',
					icon: 'icondingdan',
				},
				{
					id: 6,
					title: '冷藏冷冻',
					icon: 'icondingdan',
				},
				{
					id: 7,
					title: '休闲零食',
					icon: 'icondingdan',
				},
				{
					id: 8,
					title: '日用清洁',
					icon: 'icondingdan',
				},
			],
			productList: [
				{
					id: 1,
					title: '日本进口三文鱼日本进口三文鱼日本进口三文鱼',
					tips: '微企美食铺',
					price: '200',
				},
				{
					id: 2,
					title: '日本进口三文鱼日本进口三文鱼日本进',
					tips: '微企美食铺',
					price: '200',
				},
				{
					id: 3,
					title: '日本进口三文鱼',
					tips: '微企美食铺',
					price: '200',
				},
				{
					id: 4,
					title: '日本进口三文鱼',
					tips: '微企美食铺',
					price: '200',
				},
				{
					id: 5,
					title: '日本进口三文鱼',
					tips: '微企美食铺',
					price: '200',
				},
				{
					id: 6,
					title: '日本进口三文鱼',
					tips: '微企美食铺',
					price: '200',
				},
			],
		};
	},
	methods: {
		// 扫码
		handleScanCode() {
			// 允许从相机和相册扫码
			// uni.scanCode({
			// 	success: function (res) {},
			// });

			uni.navigateTo({
				url: '../order/search/index',
			});
		},
		// 跳转搜索页面
		handleToSearch() {
			uni.navigateTo({
				url: './search/index',
			});
		},
		// 跳转列表页面
		handleToList() {
			uni.navigateTo({
				url: './list/index',
			});
		},

		// 上拉加载数据
		onReachBottom: function () {
			this.loadStatus = 'loading';
			// 监听用户上拉触底事件
			// if (this.resData.length >= this.total || this.total == 0) {
			// 	this.loadStatus = 'noMore'
			// 	return false;
			// }

			// 上拉加载数据
			// this.cur_page += 1;
			// this.getList('more');
		},
	},
};
</script>

<style lang="scss" scoped>
/*  #ifdef  APP-PLUS  */
@include mobileStatusBar($uni-color-main);
.page-index {
	padding: var(--status-bar-height) 0 0;
}
/*  #endif  */

.page-index-container {
	padding: 104rpx 0 0;
	.app-header {
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		background: #fff;
		display: flex;
		padding: 16rpx $uni-spacing-base;
		color: $uni-color-main;
		.iconerweima {
			font-size: 44rpx;
			line-height: 60rpx;
			padding-right: $uni-spacing-base;
		}
		.iconxiaoxi {
			font-size: 42rpx;
			line-height: 72rpx;
			padding-left: $uni-spacing-base;
		}
	}

	.module-position {
		margin: 0 0 5rpx;
	}

	.module-filter {
		background: #f2f2f2;
		padding: 6rpx 16rpx;
		flex: 1;
		border-radius: 20px;
		color: $uni-text-color-grey;
		font-size: 26rpx;
		line-height: 60rpx;
		.iconsousuo {
			margin-right: 10rpx;
			font-size: 28rpx;
		}
	}
	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		background: #eee;
		height: 300rpx;
	}

	.module-classfic {
		background: #fff;
		display: flex;
		flex-wrap: wrap;
		padding: $uni-spacing-lg 0 0;

		.item {
			width: 25%;
			margin: 0 0 $uni-spacing-lg;
			text-align: center;
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
		}

		.iconfont {
			background: #eee;
			display: block;
			width: 94rpx;
			height: 94rpx;
			margin: 0 auto 8rpx;
			font-size: 38rpx;
			line-height: 94rpx;
			border-radius: $uni-border-radius-circle;
		}
	}

	.module-product {
		background: #f5f5f5;
		padding: 0 $uni-spacing-base;

		.module-header {
			padding: $uni-spacing-base $uni-spacing-sm;
		}

		.header-title {
			margin: 0 0 6rpx;
			font-size: 36rpx;
			font-weight: bold;
		}
		.header-tips {
			font-size: $uni-font-size-base;
		}
		.module-list {
			display: flex;
			flex-wrap: wrap;
		}

		.media {
			width: 50%;
			padding: 0 $uni-spacing-sm;
			margin: 0 0 $uni-spacing-lg;
			box-sizing: border-box;
		}

		.media-object {
			background: #eee;
			display: block;
			width: 100%;
			height: 200rpx;
		}

		.media-content {
			background: #fff;
			padding: 16rpx $uni-spacing-base;
		}

		.media-title {
			height: 76rpx;
			margin: 0 0 $uni-spacing-base;
			font-size: $uni-font-size-base;
			color: $uni-text-color;
			@include textEllipsis(2);
		}

		.media-tips {
			font-size: $uni-font-size-sm;
			line-height: 30rpx;
			color: $uni-text-color-grey;
		}

		.media-price {
			float: right;
			color: $uni-text-price;
			line-height: 30rpx;
			font-size: $uni-font-size-lg;
		}
	}
}
</style>
